<template>
	<view>
		<u-popup v-model="isShowSelectPopup" :mask-custom-style="maskStyle" mode="center" border-radius="14">
			<!-- 有账号 选择身份 -->
			<view class="selectWrapper" v-if="type == 'select'">
				<view class="title">选择登录身份</view>
				<view class="list">
					<view :class="selectType == 'personal' ? 'item ac' : 'item'" @click="handleSelect('personal')">
						<view class="img">
							<image :src="personalUser.photo_img_src" mode=""></image>
						</view>
						<view class="info" v-if="personalUser.is_perfect">
							<view class="name substring">
								{{personalUser.fullname}}
							</view>
							<view class="other">
								<text class="otherItem" v-if="personalUser.age">{{personalUser.age}}岁</text>
								<text class="otherItem"
									v-if="personalUser.education_text">{{personalUser.education_text}}</text>
								<text class="otherItem"
									v-if="personalUser.experience_text">{{personalUser.experience_text}}</text>
							</view>
						</view>
						<view class="info" v-else>
							<view class="name substring font">个人会员</view>
							<view class="other">未完善个人信息</view>
						</view>
					</view>
					<view :class="selectType == 'company' ? 'item ac' : 'item'" @click="handleSelect('company')">
						<view class="img">
							<image :src="companyUser.logo" mode=""></image>
						</view>
						<view class="info" v-if="companyUser.is_perfect">
							<view class="name substring">
								{{companyUser.companyname}}
							</view>
							<view class="other">
								<text class="otherItem">{{companyUser.trade_text}}</text>
							</view>
						</view>
						<view class="info" v-else>
							<view class="name substring font">
								企业会员
							</view>
							<view class="other">
								未完善企业信息
							</view>
						</view>
					</view>
				</view>
				<view class="btns">
					<view class="btn cancel" @click="close">取消</view>
					<view class="btn affirm" @click="handleLogin">去登录</view>
				</view>
			</view>
			<!-- 有账号 选择身份 -->
			<!-- 无账号 -->
			<view class="selectWrapper" v-if="type == 'unregistered'">
				<view class="title">系统提示</view>
				<view class="content">
					当前手机号未注册，是否前往注册？
				</view>
				<view class="btns">
					<view class="btn cancel" @click="close">取消</view>
					<view class="btn affirm" @click="handleRegAccount">去注册</view>
				</view>
			</view>
			<!-- 无账号 -->
			<!-- 获取手机号拒绝 -->
			<view class="selectWrapper" v-if="type == 'aborted'">
				<view class="title">授权失败</view>
				<view class="content pd25">
					<!-- #ifdef MP-WEIXIN -->
					您已拒绝微信手机号登录授权，请使用其他手机号验证登录
					<!-- #endif -->
					<!-- #ifdef MP-TOUTIAO || MP-ALIPAY -->
					您已拒绝抖音手机号登录授权，请使用其他手机号验证登录
					<!-- #endif -->
				</view>
				<view class="btns">
					<view class="btn cancel" @click="close">知道了</view>
					<view class="btn affirm" @click="handleCodeLogin">验证码登录</view>
				</view>
			</view>
			<!-- 获取手机号拒绝 -->
		</u-popup>
		<TopTips ref="TopTips"></TopTips>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	import handlerHttpError from '@/utils/error.js'
	import {
		mapActions
	} from 'vuex'
	/**
	 * type  select选择身份  unregistered未注册  aborted没有权限
	 * */
	export default {
		name: "SelectUserType",
		props: ['type', 'companyUser', 'personalUser'],
		data() {
			return {
				selectType: 'personal',
				isShowSelectPopup: false,
				maskStyle: {
					// background:'#291b1b',
					background: 'rgba(41, 27, 27,1)',
					backdropFilter: 'blur(5px)'
				},
			};
		},
		created() {
			switch (uni.getSystemInfoSync().platform) {
				case 'android':
					this.$set(this.maskStyle, 'background', 'rgba(38, 38, 38,.1)')
					break;
				case 'ios':
					this.$set(this.maskStyle, 'background', 'rgba(68, 68,68,0.65)')
					break;
				default:
					this.$set(this.maskStyle, 'background', 'rgba(38, 38, 38,.1)')
					break;
			}
		},
		methods: {
			...mapActions(['getImToken', 'getChatLists']),
			handleSelect(type) {
				this.selectType = type
			},
			open() {
				this.isShowSelectPopup = true
			},
			close() {
				this.isShowSelectPopup = false
			},
			// 验证码登录
			handleCodeLogin() {
				this.isShowSelectPopup = false
				uni.navigateTo({
					url: '/member/Login'
				})
			},
			// 注册账号
			handleRegAccount() {
				this.isShowSelectPopup = false
				uni.navigateTo({
					url: '/member/Reg'
				})
			},
			// 去登录
			handleLogin() {
				this.isShowSelectPopup = false
				var params = {}
				if (this.selectType == 'company') {
					params = this.companyUser
				} else if (this.selectType == 'personal') {
					params = this.personalUser
				}
				// params.is_perfect 0 无效会员
				// if(!params.is_perfect){
				this.login(params)
				// }

			},
			updateImToken() {
				this.getImToken()
				let imToken = this.$store.state.imToken
				this.$ws.init(imToken);
				this.getChatLists({
					url: api.chatList
				});
			},
			login(item) {
				console.log(123)
				http.post(api.smallRoutineLogin, {
					uid: item.uid
				}).then(res => {
					if (parseInt(res.data.code) === 200) {
						this.$store.commit('clearCountDownFun')
						let loginInfo = {
							whether: true,
							utype: res.data.data.utype,
							token: res.data.data.token,
							mobile: res.data.data.mobile,
							userIminfo: res.data.data.user_iminfo
						}
						this.$store.commit('setLoginState', loginInfo)
						uni.setStorageSync('loginInfo', loginInfo);
						this.updateImToken()
						if (res.data.data.next_code != 200) {
							if (res.data.data.next_code == 50007) {
								uni.setStorageSync('toCompleteCompanyInfo', false)
								uni.setStorageSync('toCompleteResume', true)
								uni.redirectTo({
									url: '/personal/PersonalIndex'
								})
							} else if (res.data.data.next_code == 50003) {
								uni.setStorageSync('toCompleteResume', false)
								uni.setStorageSync('toCompleteCompanyInfo', true)
								uni.redirectTo({
									url: '/company/CompanyIndex'
								})
							}
							return false
						}
						this.$emit('login', res.data.data)
					} else {
						this.$refs.TopTips.show({
							title: res.data.message,
							type: 'error'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.selectWrapper {
		width: 640rpx;
		box-sizing: border-box;
		padding: 40rpx 50rpx 60rpx;

		.title {
			text-align: center;
			color: #2A2A2A;
			font-size: 34rpx;
			font-weight: bold;
			margin-bottom: 65rpx;
		}

		.list {
			.item {
				display: flex;
				align-items: center;
				padding: 38rpx;
				border-radius: 20rpx;
				margin-bottom: 34rpx;
				border: 1rpx solid transparent;
				box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(11, 64, 255, 0.04);
				border-radius: 20rpx;

				&.ac {
					border: 1rpx solid #266DFF;
					background: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(97, 149, 255, 0.15));
					box-shadow: 0px 0px 40rpx 0px rgba(11, 64, 255, 0.04);
				}

				.img {
					width: 100rpx;
					height: 100rpx;
					margin-right: 30rpx;

					image {
						display: block;
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.info {
					flex-shrink: 0;
					width: calc(100% - 130rpx);

					.name {
						color: #2A2A2A;
						font-size: 34rpx;

						&.font {
							font-weight: bold;
							margin-bottom: 20rpx;
						}
					}

					.other {
						color: #797979;
						font-size: 24rpx;

						.otherItem {
							position: relative;
							margin-right: 30rpx;

							&::before {
								content: '';
								width: 6rpx;
								height: 6rpx;
								background: #797979;
								position: absolute;
								right: -18rpx;
								top: 50%;
								border-radius: 50%;
								transform: translateY(-50%);
							}

							&:last-child {
								margin-right: 0;
							}

							&:last-child::before {
								display: none;
							}
						}
					}
				}
			}
		}

		.content {
			color: #595959;
			font-size: 28rpx;
			text-align: center;
			padding-bottom: 60rpx;

			&.pd25 {
				padding-bottom: 25rpx;
			}
		}

		.btns {
			display: flex;

			.btn {
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40px;
				text-align: center;
				font-size: 32rpx;
				margin-top: 32rpx;

				&.cancel {
					flex-shrink: 0;
					width: 220rpx;
					color: #2A2A2A;
					background: #F5F5F5;
					margin-right: 17rpx;
				}

				&.affirm {
					flex-shrink: 0;
					width: 300rpx;
					color: #FFFFFF;
					background: linear-gradient(45deg, #1360FF, #4381FF);
				}
			}
		}
	}
</style>